'use client'

import MyForm from '@/ui-components/MyForm'

export default function Home() {
  const options = [
    [
      {
        type: 'text', // 字段类型：text、select、password...
        name: 'username1',
        label: '用户名1',
        placeholder: '请输入用户名', // 占位符
        initialValue: '小明', // 初始值
        hidden: false, // 字段显影
        disabled: false,
        tooltip: '输入你的姓名',
        width: 8, // 字段宽度
        labelStyle: { color: 'red', fontWeight: 700 }, // 自定义样式
        rules: [{ required: true, message: '请输入用户名!' }], // 校验规则
      },
      {
        type: 'text', // 字段类型：text、select、password...
        name: 'username2',
        label: '用户名2',
        placeholder: '请输入用户名', // 占位符
        initialValue: '李华', // 初始值
        hidden: false, // 字段显影
        disabled: false,
        width: 8, // 字段宽度
        labelStyle: { color: 'red', fontWeight: 700 }, // 自定义样式
        rules: [{ required: false, message: '请输入用户名!' }], // 校验规则
      },
      {
        type: 'time', // 字段类型：text、select、password...
        name: 'time1',
        label: '日期',
        placeholder: '请选择日期', // 占位符
        initialValue: new Date(), // 初始值
        isRange: false, // 是否范围选择
        hidden: false, // 字段显影
        disabled: false, // 字段禁用
        width: 8, // 字段宽度
        rules: [{ required: true, message: '请选择日期!' }], // 校验规则
      },
    ],
    {
      type: 'text', // 字段类型：text、select、password...
      name: 'username',
      label: '用户名',
      placeholder: '请输入用户名', // 占位符
      initialValue: '张三hh', // 初始值
      hidden: false, // 字段显影
      disabled: false,
      width: 12, // 字段宽度
      labelStyle: { color: 'red', fontWeight: 700 }, // 自定义样式
      rules: [{ required: true, message: '请输入用户名!' }], // 校验规则
    },
    {
      type: 'select',
      name: 'gender',
      label: '性别',
      initialValue: '0',
      placeholder: '请选择性别',
      disabled: false,
      width: 12,
      options: [
        // 字典值
        { label: '男', value: '1' },
        { label: '女', value: '0' },
      ],
      rules: [{ required: true, message: '请选择性别!' }],
    },
    {
      type: 'password',
      name: 'password',
      label: '密码',
      width: 12,
      placeholder: '请输入密码',
      disabled: false,
      rules: [{ required: true, message: '请输入密码!' }],
    },
    {
      type: 'time', // 字段类型：text、select、password...
      name: 'time2',
      label: '日期',
      placeholder: '请选择日期', // 占位符
      initialValue: new Date(), // 初始值
      isRange: false, // 是否范围选择
      hidden: false, // 字段显影
      disabled: true, // 字段禁用
      width: 24, // 字段宽度
      rules: [{ required: true, message: '请选择日期!' }], // 校验规则
    },
    {
      type: 'divider',
      label: '人员审核',
      labelStyle: { fontWeight: 700, fontSize: 24 },
      orientation: 'left',
      hidden: false,
    },
    {
      type: 'textarea', // 字段类型：text、select、password...
      name: 'yj',
      label: '意见',
      placeholder: '请输入意见', // 占位符
      initialValue: '同意', // 初始值
      hidden: false, // 字段显影
      disabled: false,
      tooltip: '请如入你的理由',
      width: 24, // 字段宽度
      rules: [{ required: true, message: '请输入意见!' }], // 校验规则
    },
    [
      {
        type: 'text', // 字段类型：text、select、password...
        name: 'SHR',
        label: '审核人',
        placeholder: '请输入用户名', // 占位符
        initialValue: '张三', // 初始值
        hidden: false, // 字段显影
        disabled: true,
        width: 6, // 字段宽度
        rules: [{ required: true, message: '请输入用户名!' }], // 校验规则
      },
      {
        type: 'time', // 字段类型：text、select、password...
        name: 'RQ',
        label: '日期',
        placeholder: '请选择日期', // 占位符
        initialValue: new Date(), // 初始值
        isRange: false, // 是否范围选择
        hidden: false, // 字段显影
        disabled: true, // 字段禁用
        width: 6, // 字段宽度
      },
    ],
    [
      {
        type: 'checkbox', // 字段类型：text、select、password...
        name: 'rylx',
        label: '人员类型',
        initialValue: ['1', '2'], // 初始值
        hidden: false, // 字段显影
        disabled: false,
        width: 12, // 字段宽度
        options: [
          // 字典值
          { label: '教师', value: '1' },
          { label: '学生', value: '2' },
          { label: '校外人员', value: '3' },
        ],
        rules: [{ required: true, message: '请选择!' }], // 校验规则
      },
      {
        type: 'radio', // 字段类型：text、select、password...
        name: 'xl',
        label: '学历',
        initialValue: '2', // 初始值
        hidden: false, // 字段显影
        disabled: false,
        width: 12, // 字段宽度
        options: [
          // 字典值
          { label: '本科', value: '1' },
          { label: '硕士', value: '2' },
          { label: '博士', value: '3' },
        ],
        labelStyle: { fontWeight: 700 }, // 自定义样式
        rules: [{ required: true, message: '请选择！' }], // 校验规则
      },
    ],
    {
      type: 'checkbox', // 字段类型：text、select、password...
      name: 'rylx1',
      label: '人员类型',
      initialValue: ['1', '2'], // 初始值
      hidden: false, // 字段显影
      disabled: false,
      width: 24, // 字段宽度
      options: [
        // 字典值
        { label: '教师', value: '1' },
        { label: '学生', value: '2' },
        { label: '校外人员', value: '3' },
      ],
      rules: [{ required: true, message: '请选择!' }], // 校验规则
    },
    {
      type: 'radio', // 字段类型：text、select、password...
      name: 'xl1',
      label: '学历',
      initialValue: '2', // 初始值
      hidden: false, // 字段显影
      disabled: false,
      width: 24, // 字段宽度
      options: [
        // 字典值
        { label: '本科', value: '1' },
        { label: '硕士', value: '2' },
        { label: '博士', value: '3' },
      ],
      labelStyle: { fontWeight: 700 }, // 自定义样式
      rules: [{ required: true, message: '请选择！' }], // 校验规则
    },
  ]
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values)
  }
  return (
    <div>
      <div className="bg-blue-500 fixed z-50 top-0 w-full text-white pl-28 py-5 text-2xl font-bold text-nowrap">
        Base Antd Form
      </div>
      <div className="m-8 mt-24">
        <MyForm
          options={options}
          onSubmit={onFinish} // 提交事件
          formLayout="horizontal" // 表单布局：默认为水平布局，可选值为'horizontal'、'vertical'、'inline'
          hideSubmitButton={false} // 控制提交按钮的显示与隐藏
          disableSubmitButton={false} //禁用提交按钮
          resetButton={true} // 控制重置按钮的显示与隐藏
        />
      </div>
    </div>
  )
}
